<template>
  <div class="video-container"  >
    <!-- 视频容器 -->
    <video ref="videoRef"  class="video-js vjs-big-play-centered" controls preload="auto"></video>

    <!-- 清晰度选择器（已启用） -->
    <div class="quality-selector">
      <select v-model="selectedQuality" @change="changeQuality">
        <option :value="quality.value" v-for="quality in qualities" :key="quality.value">
          {{ quality.label }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import '@videojs/http-streaming';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'; // 引入中文语言包
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    sources: {
      type: Object,
      required: true,
      default: () => ({
        hd: { src: '/videos/hd.mp4', type: 'video/mp4' },
        sd: { src: '/videos/sd.mp4', type: 'video/mp4' } // 补充标清源，需实际文件对应
      })
    },
    poster: {
      type: String,
      default: '/poster.jpg'
    }
  },
  data() {
    return {
      player: null, // video.js播放器实例
      qualities: [
        { label: '高清', value: 'hd' },
        { label: '标清', value: 'sd' }
      ],
      selectedQuality: 'hd' // 默认清晰度
    };
  },
  mounted() {
    this.initPlayer();
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
  },
  methods: {
    // 初始化video.js播放器
    initPlayer() {
      videojs.addLanguage('zh-CN', video_zhCN);

      const videoElement = this.$refs.videoRef;

      // 配置播放器选项
      const options = {
        autoplay: false, // 自动播放（浏览器通常限制带声音的自动播放）
        controls: true, // 显示控制栏
        width: this.width, // 宽度
        height: this.height, // 高度
        // responsive: true, // 响应式布局
        fluid: true, // 自适应容器宽高
        poster: this.poster ? this.poster : '', // 视频封面图
        sources: [this.sources[this.selectedQuality]], // 初始视频源
        language: 'zh-CN' // 设置语言为中文
      };

      this.player = videojs(videoElement, options);
      // 监听播放事件
      this.player.on('play', () => {
        console.log('视频开始播放');
      });

      // 监听结束事件
      this.player.on('ended', () => {
        console.log('视频播放结束');
      });
    },

    // 切换清晰度
    changeQuality() {
      if (this.player) {
        // 切换视频源
        this.player.src(this.sources[this.selectedQuality]);
        // 继续播放（如果之前在播放）
        if (!this.player.paused()) {
          this.player.play();
        }
      }
    }
  }
};
</script>

<style scoped>
.video-container {
  max-height:540px;
  position: relative;
}

::v-deep video {
  border-radius: 6px;
  overflow: hidden;
}

.quality-selector {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
}

.quality-selector select {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

/* 下拉框悬停/聚焦样式 */
.quality-selector select:hover,
.quality-selector select:focus {
  border-color: #ff4d4f;
  /* 边框高亮 */
  outline: none;
  /* 去掉默认聚焦轮廓 */
}

/* 下拉选项样式 */
.quality-selector select option {
  background: #333;
  /* 选项背景 */
  color: #fff;
}
</style>